<template>
  <view class="container">
    <!-- 顶部轮播图 -->
    <swiper class="banner-swiper" :autoplay="true" :interval="3000" :circular="true" :indicator-dots="true" indicator-active-color="#FF4757">
      <swiper-item>
        <image class="banner" src="/static/banner/banner1.jpeg" mode="widthFix"></image>
      </swiper-item>
      <swiper-item>
        <image class="banner" src="/static/banner/banner1.jpeg" mode="widthFix"></image>
      </swiper-item>
      <swiper-item>
        <image class="banner" src="/static/banner/banner1.jpeg" mode="widthFix"></image>
      </swiper-item>
    </swiper>

    <!-- 主功能区域 -->
    <view class="main-card">
      <view class="section-title">上传草莓图片进行处理</view>

      <!-- 结果展示 -->
      <view class="result-container" v-if="resultImage">
        <img class="result-image" :src="resultImage" mode="widthFix">
        <view class="result-info">
          <view class="result-item" v-for="(item, index) in results" :key="index">
            <view class="result-label">{{ item.label }}</view>
            <view class="result-value">{{ item.value }}%</view>
            <view class="result-bar"
                  :style="{width: item.value + '%', backgroundColor: getColorByValue(item.value)}"></view>
          </view>
        </view>
      </view>

      <!-- 操作区域 -->
      <view class="action-container">
        <view class="camera-btn" @click="handleCameraClick">
          <uni-icons type="camera-filled" size="60" color="#fff"></uni-icons>
        </view>

        <view class="action-btns">
          <button class="action-btn upload-btn" @click="handleUploadClick">
            <uni-icons type="upload" size="24" color="#fff"></uni-icons>
            <text>上传图片</text>
          </button>
          <button class="action-btn shoot-btn" @click="handleShootClick">
            <uni-icons type="camera" size="24" color="#fff"></uni-icons>
            <text>拍摄照片</text>
          </button>
        </view>
      </view>

      <!-- 操作指引 -->
      <view class="guide-container">
        <view class="guide-title">操作指引</view>
        <view class="guide-item">
          <uni-icons type="info" size="16" color="#999"></uni-icons>
          <text>请确保草莓在照片中清晰可见</text>
        </view>
        <view class="guide-item">
          <uni-icons type="info" size="16" color="#999"></uni-icons>
          <text>建议在自然光下拍摄效果最佳</text>
        </view>
      </view>
    </view>

    <!-- 加载状态 -->
    <uni-load-more v-if="loading" status="loading" :icon-size="16"></uni-load-more>
  </view>
</template>

<script>
import {pathToBase64, base64ToPath} from '@/utils/base64.js'
import detectApi from '@/api/detectApi.js'
import {checkLogin} from '@/utils/util.js'

export default {
  data() {
    return {
      loading: false,
      resultImage: null,
      results: [
        {label: '未成熟', value: 15},
        {label: '半成熟', value: 35},
        {label: '成熟', value: 50}
      ]
    }
  },
  methods: {
    getColorByValue(value) {
      if (value < 30) return '#FF9500';
      if (value < 70) return '#FFCC00';
      return '#4CD964';
    },
    handleCameraClick() {
      uni.showToast({
        title: '请选择上传或拍摄',
        icon: 'none'
      })
    },
    async handleUploadClick() {
      if (!checkLogin()) return
      try {
        this.loading = true;
        const res = await uni.chooseImage({
          count: 1,
          sourceType: ['album']
        });
        await this.detect(res)
        uni.showToast({
          title: '分析完成',
          icon: 'success'
        });
      } catch (e) {
        console.log(e)
        uni.showToast({
          title: '处理失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    async handleShootClick() {
      if (!checkLogin()) return
      try {
        this.loading = true;
        const res = await uni.chooseImage({
          count: 1,
          sourceType: ['camera']
        });
        await this.detect(res)
        uni.showToast({
          title: '分析完成',
          icon: 'success'
        });
      } catch (error) {
        uni.showToast({
          title: '拍摄失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    async detect(imgPath){
    	const tempPath = imgPath.tempFilePaths[0];
    	const base64 = await pathToBase64(tempPath);
    	await detectApi.detectImg({
    			image: base64.split(',')[1],
    			conf: 30,
    			timeout: 30000
    		}).then(response =>{
    			const total = response.data[0].immature+response.data[0].semi_mature+response.data[0].mature
    			this.resultImage = response.data[0].image
    			this.results[0].value=((response.data[0].immature) / total * 100).toFixed(1)
    			this.results[1].value=((response.data[0].semi_mature) / total * 100).toFixed(1)
    			this.results[2].value=((response.data[0].mature) / total * 100).toFixed(1)
    	})
    }
	// async detect(imgPath){
	// 	const tempPath = imgPath.tempFilePaths[0];
	// 	const base64 = await pathToBase64(tempPath);
	// 	await detectApi.detectImg({
	// 			image: base64.split(',')[1],
	// 			conf: 25,
	// 			timeout: 30000
	// 		}).then(response =>{
	// 			const total = response[0].immature+response[0].semi_mature+response[0].mature
	// 			this.resultImage = response[0].image
	// 			this.results[0].value=((response[0].immature) / total * 100).toFixed(1)
	// 			this.results[1].value=((response[0].semi_mature) / total * 100).toFixed(1)
	// 			this.results[2].value=((response[0].mature) / total * 100).toFixed(1)
	// 	})
	// }
    // async detect(imgPath) {
    //   const tempPath = imgPath.tempFilePaths[0];
    //   const base64 = await pathToBase64(tempPath);
    //   await uni.request({
    //     url: "https://www.strarry.top/predict",
    //     method: 'POST',
    //     data: JSON.stringify({
    //       image: base64.split(',')[1],
    //       conf: 25
    //     }),
    //     timeout: 30000
    //   }).then(response => {
    //     const total = response.data[0].immature + response.data[0].semi_mature + response.data[0].mature
    //     this.resultImage = response.data[0].image
    //     this.results[0].value = ((response.data[0].immature) / total * 100).toFixed(1)
    //     this.results[1].value = ((response.data[0].semi_mature) / total * 100).toFixed(1)
    //     this.results[2].value = ((response.data[0].mature) / total * 100).toFixed(1)
    //   })
    // }
  }
}
</script>

<style lang="scss">
@import '@/uni.scss';

.container {
  padding: 20rpx;
  background-color: $uni-bg-color-grey;
  min-height: 100vh;
}

.banner-swiper {
  width: 100%;
  height: 300rpx;
  margin-bottom: 40rpx;
  border-radius: $uni-border-radius-lg;
  overflow: hidden;
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  
  .banner {
    width: 100%;
    height: 100%;
    transform: translate3d(0,0,0);
    border-radius: $uni-border-radius-lg;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
  }
  
  .uni-swiper-wrapper,
  .uni-swiper-slide-frame,
  .uni-swiper-slide {
    border-radius: $uni-border-radius-lg !important;
    overflow: hidden !important;
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
  }
  
  .uni-swiper-slide {
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }
  
  .uni-swiper-dots {
    bottom: 20rpx;
    
    .uni-swiper-dot {
      width: 12rpx;
      height: 12rpx;
      margin: 0 8rpx;
      background-color: rgba(255, 255, 255, 0.5);
    }
    
    .uni-swiper-dot-active {
      width: 24rpx;
      border-radius: 6rpx;
      background-color: #FF4757;
    }
  }
}

.main-card {
  background-color: $uni-bg-color;
  border-radius: $uni-border-radius-lg;
  padding: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.section-title {
  font-size: $uni-font-size-lg;
  font-weight: bold;
  color: $uni-text-color;
  margin-bottom: 10rpx;
  text-align: center;
}

.section-desc {
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;
  text-align: center;
  margin-bottom: 40rpx;
}

.result-container {
  margin: 40rpx 0;
  border-radius: $uni-border-radius-base;
  overflow: hidden;
}

.result-image {
  width: 100%;
  border-radius: $uni-border-radius-base;
}

.result-info {
  background-color: #f8f8f8;
  padding: 30rpx;
  margin-top: 20rpx;
  border-radius: $uni-border-radius-base;
}

.result-item {
  margin-bottom: 20rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.result-label {
  font-size: $uni-font-size-base;
  color: $uni-text-color;
  margin-bottom: 10rpx;
  display: flex;
  justify-content: space-between;
}

.result-value {
  font-weight: bold;
}

.result-bar {
  height: 8rpx;
  border-radius: 4rpx;
  margin-top: 10rpx;
}

.action-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40rpx 0;
}

.camera-btn {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: $uni-color-strawberry;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40rpx;
  box-shadow: 0 8rpx 16rpx rgba($uni-color-strawberry, 0.3);
}

.action-btns {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.action-btn {
  flex: 1;
  margin: 0 20rpx;
  height: 80rpx;
  border-radius: $uni-border-radius-base;
  display: flex;
  justify-content: center;
  align-items: center;

  text {
    margin-left: 10rpx;
    font-size: $uni-font-size-base;
    color: $uni-text-color-inverse;
  }
}

.upload-btn {
  background-color: $uni-color-primary;
}

.shoot-btn {
  background-color: $uni-color-success;
}

.guide-container {
  margin-top: 40rpx;
  padding-top: 30rpx;
  border-top: 1rpx solid $uni-border-color;
}

.guide-title {
  font-size: $uni-font-size-base;
  color: $uni-text-color-grey;
  margin-bottom: 20rpx;
}

.guide-item {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;

  text {
    margin-left: 10rpx;
  }
}
</style>
